<script setup lang="ts">
import FormButton from '@renderer/components/formButton.vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const currentWindowName = route.currentRoute.value.query.currentWindowName as unknown as WindowNameType
const currentPage = route.currentRoute.value.query.currentPage as string
const selectType = ref(0)
const showTableList = ref(false)
const ids = ref<number[]>([])
const findInfo = reactive({
  findContent: '',
  replaceContent: '',
})
const currentType = ref(0)
const handleSelectType = (type: number) => {
  selectType.value = type
}
const previewDataList = ref<
  { name: string; remark: string; id: number; fatherIndex: number; childIndex: number; roomName: string }[]
>([])
const handleClose = () => {
  window.api.closeWindow('findSearch', 'destroy')
}
// 替换全部
const handleAllReplace = () => {
  if (currentType.value == 0) {
    ElMessage({ type: 'error', message: '抱歉！查找单个不支持替换全部！' })
    return
  }
  if (!findInfo.findContent) {
    ElMessage({ type: 'error', message: '抱歉！请先输入替换内容！' })
    return
  }
  if (!previewDataList.value.length) {
    ElMessage({ type: 'error', message: '抱歉！请先查找全部可替换的数据！' })
    return
  }
  const content = findInfo.findContent
  const replaceContent = findInfo.replaceContent
  let idsAll = [] as Number[]
  previewDataList.value.forEach((item) => {
    idsAll.push(item.id)
  })
  window.api.findSendMsg(currentWindowName, 'handleAllReplace', currentPage, content, replaceContent, idsAll.join(','))
  previewDataList.value = []
  ids.value = []
  window.api.setWindowHeight('findSearch', 230)
  showTableList.value = false
  ElMessage({ type: 'success', message: `全部替换成功，共完成${idsAll.length}处替换。` })
}

// 替换
const handleReplace = () => {
  if (!findInfo.findContent) {
    ElMessage({ type: 'error', message: '抱歉！请先输入替换内容！' })
    return
  }
  if (currentType.value == 1) {
    if (!ids.value.length) {
      ElMessage({ type: 'error', message: '抱歉！请先选择替换的数据！' })
      return
    }
    const content = findInfo.findContent
    const replaceContent = findInfo.replaceContent
    window.api.findSendMsg(
      currentWindowName,
      'handleReplace',
      currentPage,
      content,
      replaceContent,
      ids.value.join(','),
    )
    window.api.setWindowHeight('findSearch', 230)
    showTableList.value = false
    ElMessage({ type: 'success', message: `全部替换成功，共完成${ids.value.length}处替换。` })
    previewDataList.value = []
    ids.value = []
  } else {
    const content = findInfo.findContent
    const replaceContent = findInfo.replaceContent
    window.api.findSendMsg(currentWindowName, 'handleReplace', currentPage, content, replaceContent)
  }
}
// 查找全部
const handleAllFind = () => {
  if (!findInfo.findContent) {
    ElMessage({ type: 'error', message: '抱歉！请先输入查找内容！' })
    return
  }
  window.api.setWindowHeight('findSearch', 550)
  showTableList.value = true
  const content = findInfo.findContent
  window.api.findSendMsg(currentWindowName, 'handleAllFind', currentPage, content)
  currentType.value = 1
}
// 查找
const handleFind = () => {
  if (!findInfo.findContent) {
    ElMessage({ type: 'error', message: '抱歉！请先输入查找内容！' })
    return
  }
  window.api.setWindowHeight('findSearch', 230)
  showTableList.value = false
  const content = findInfo.findContent
  window.api.findSendMsg(currentWindowName, 'handleFind', currentPage, content)
  currentType.value = 0
}
window.api.pushDataLit((dataList) => {
  previewDataList.value = []
  const resultDataList = JSON.parse(dataList)
  if (resultDataList.length) {
    resultDataList.forEach((item) => {
      previewDataList.value.push({
        name: item.name,
        remark: item.remark,
        id: item.id,
        fatherIndex: item.fatherIndex ? item.fatherIndex : '',
        childIndex: item.childIndex ? item.childIndex : '',
        roomName: item.roomName ? item.roomName : '',
      })
    })
  }
})
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
}
</script>
<template>
  <main class="bg-[#F0F0F0] flex flex-col overflow-hidden nodrag p-2" style="height: -webkit-fill-available">
    <div>
      <section>
        <div class="findSearch" :class="selectType == 0 ? 'bg-white' : 'bg-[#F0F0F0]'" @click="handleSelectType(0)">
          查找
        </div>
        <div class="findReplace" :class="selectType == 1 ? 'bg-white' : 'bg-[#F0F0F0]'" @click="handleSelectType(1)">
          替换
        </div>
      </section>
      <div class="searchContent">
        <el-form>
          <el-form-item label-width="80">
            <template #label>
              <span class="text-sm text-black" style="line-height: 32px">查找内容:</span>
            </template>
            <el-input v-model="findInfo.findContent" placeholder="请输入"> </el-input>
          </el-form-item>
          <div :class="selectType == 1 ? 'opacity-100' : 'opacity-0 pointer-events-none'">
            <el-form-item label-width="80">
              <template #label>
                <span class="text-sm text-black" style="line-height: 32px">替换为:</span>
              </template>
              <el-input v-model="findInfo.replaceContent" placeholder="请输入"> </el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <footer>
        <div class="handleBtn">
          <FormButton @click="handleAllFind">查找全部</FormButton>
          <FormButton @click="handleFind">查找下一个</FormButton>
          <FormButton @click="handleReplace">替换</FormButton>
          <FormButton @click="handleAllReplace">全部替换</FormButton>
          <FormButton @click="handleClose">关闭</FormButton>
        </div>
      </footer>
    </div>
    <div class="flex-1" v-if="showTableList">
      <el-table
        :data="previewDataList"
        border
        header-align="center"
        height="310"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#FFF4E5', fontSize: '14px', color: '#888', fontWeight: '400' }">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column
          prop="roomName"
          label="房间名称"
          align="center"
          width="120"
          v-if="currentPage == 'total' || currentPage == 'basiceQuipment'" />
        <el-table-column prop="name" label="打印名称" align="center" width="110">
          <template #default="scope">
            {{ scope.row.print_name ? scope.row.print_name : scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" />
      </el-table>
    </div>
  </main>
</template>
<style lang="scss" scoped>
main {
  section {
    @apply flex;
    .findSearch {
      @apply text-sm px-4 overflow-hidden;
      border: 1px solid #888888;
      border-bottom: none;
      border-right: none;
      padding: 2px 16px;
      border-radius: 4px 0 0 0;
    }
    .findReplace {
      @apply text-sm px-4 overflow-hidden;
      border: 1px solid #888888;
      border-bottom: none;
      padding: 2px 16px;
      border-radius: 0 4px 0 0;
    }
  }
  .searchContent {
    @apply bg-white p-3 rounded-md rounded-tl-none flex flex-col;
    border: 1px solid #888888;
  }
  footer {
    @apply items-center flex my-2;
    .handleBtn {
      @apply flex justify-around flex-1;
    }
  }
}
.el-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  .el-form-item {
    margin-bottom: 0 !important;
    flex: 1;
    display: flex;
  }
}
</style>
